<script setup lang="ts">
import type { RoleListResult } from "@/api/types";
import { $t } from "@/plugins/i18n";
import { fmtTableData } from "@/utils/tools";
import AssignDrawer from "./components/AssignDrawer.vue";
import FormDialog from "./components/FormDialog.vue";
import { useRoleAssignDrawer, useRoleFormDialog, useRoleTable } from "./composables";

defineOptions({
    name: "SysRole",
});

const {
    tableLoading,
    tableData,
    tablePage,
    tableQuery,
    fetchTableData,
    handleTableQuery,
    resetTableQuery,
    handleRecordDelete,
} = useRoleTable();

const {
    dialogVisible,
    editData,
    openAddDialog,
    openEditDialog,
} = useRoleFormDialog();

const {
    assignVisible,
    currentRole,
    openAssignDrawer,
} = useRoleAssignDrawer();
</script>

<template>
    <el-card>
        <el-form :inline="true" :model="tableQuery" class="w-full">
            <el-form-item :label="$t('label.roleName')">
                <el-input
                    v-model.trim="tableQuery.name"
                    clearable
                    class="w-60!"
                    :placeholder="$t('placeholder.inputRoleName')"
                    @keyup.enter="handleTableQuery"
                />
            </el-form-item>
            <el-form-item :label="$t('label.roleCode')">
                <el-input
                    v-model.trim="tableQuery.code"
                    clearable
                    class="w-60!"
                    :placeholder="$t('placeholder.inputRoleCode')"
                    @keyup.enter="handleTableQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleTableQuery">
                    {{ $t("button.search") }}
                </el-button>
                <el-button @click="resetTableQuery">
                    {{ $t("button.reset") }}
                </el-button>
                <el-button type="primary" @click="openAddDialog">
                    {{ $t("button.add") }}
                </el-button>
            </el-form-item>
        </el-form>
        <el-page-table
            :loading="tableLoading"
            :data="tableData"
            :page="tablePage"
            :fetch-data="fetchTableData"
        >
            <el-table-column prop="name" :label="$t('label.roleName')" />
            <el-table-column prop="code" :label="$t('label.roleCode')" />
            <el-table-column prop="createdAt" :label="$t('label.createdAt')" :formatter="(row) => fmtTableData().date(row.createdAt)" />
            <el-table-column prop="updatedAt" :label="$t('label.updatedAt')" :formatter="(row) => fmtTableData().date(row.updatedAt)" />
            <el-table-column :label="$t('label.operation')" width="200">
                <template #default="{ row }: { row: RoleListResult }">
                    <el-button type="primary" link @click="openEditDialog(row.id)">
                        {{ $t("button.edit") }}
                    </el-button>
                    <el-button type="primary" link @click="openAssignDrawer(row)">
                        {{ $t("button.auth") }}
                    </el-button>
                    <el-delete-button is-box @confirm="handleRecordDelete(row.id)" />
                </template>
            </el-table-column>
        </el-page-table>

        <FormDialog
            v-model:visible="dialogVisible"
            :edit-data="editData"
            @success="fetchTableData"
        />
        <AssignDrawer
            v-model:visible="assignVisible"
            :role="currentRole"
        />
    </el-card>
</template>
